<template>
  <div id="echarts-personnel"></div>
</template>

<script>
export default {
  name: 'personnel-management',
  data: function () {
    return {
      data: [],
      objData: []
    }
  },
  mounted () {
    this.getData()
    this.draw()
  },
  methods: {
    async getData () {
      const chartName = ['建设单位', '监理单位', '施工单位', '工人']
      const chartData = ['454', '120', '354', '354']
      const data = []
      const total = this.sum(chartData)
      for (let i = 0; i < chartData.length; i++) {
        const c = {
          value: chartData[i],
          name: chartName[i],
          percent: (parseInt(chartData[i]) / total * 100).toFixed(2) + '%'
        }
        data[i] = c
      }
      this.data = data
      this.objData = this.array2obj(data, 'name')
      console.error(this.array2obj(data, 'name'))
    },
    draw () {
      const chart2 = this.$echarts.init(document.getElementById('echarts-personnel'))
      chart2.setOption(
        {
          color: ['#2e73ff', '#ff2e2e', '#36c67d', '#4b9ff1'],
          legend: {
            icon: 'circle',
            orient: 'vartical',
            x: 'left',
            top: 'center',
            left: '60%',
            bottom: '0%',
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 16,
            formatter: function (name) {
              return '{value| ' + name + '}'
            },
            textStyle: {
              rich: {
                value: {
                  fontSize: 12,
                  color: '#97979f',
                  fontWeight: 'bold'
                }
              }
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}  {c}人<br>{d} %'
          },
          series: [{
            type: 'pie',
            clockwise: true, // 饼图的扇区是否是顺时针排布
            minAngle: 2, // 最小的扇区角度（0 ~ 360）
            radius: ['50%', '80%'],
            center: ['25%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: '{a|总人数} \n\n {b|1450}',
                rich: {
                  a: {
                    color: '#97979f',
                    fontSize: 12
                  },
                  b: {
                    color: '#2e73ff',
                    fontSize: 18
                  }
                },
                position: 'center'

              }
            },
            data: this.data
          }]
        }
      )
      window.onresize = this.chart_2.resize
    },
    sum (arr) {
      var s = 0
      for (var i = arr.length - 1; i >= 0; i--) {
        s += parseInt(arr[i])
      }
      return s
    },
    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #echarts-personnel{
    width: 8rem;
    height: 3rem;
  }
</style>
